<template>
	<view>
		<view class="proCard" v-for="item in list">
			<image :src="item.pic" mode=""></image>
			<view class="proInfo">
				<view class="proTop">{{item.name}}</view>
				<view class="proBottom">
					<view class="shoucang">收藏</view>
					<view class="proPrice">￥{{item.price}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			}
		},
		onLoad() {
			this.list = uni.getStorageSync("collectList")
		},
		methods: {
			
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #F1ECE7;
	}
</style>

<style lang="scss" scoped>
	.proCard{
		display: flex;
		width: 315px;
		height: 80px;
		padding: 15px;
		border-radius: 4px;
		background-color: #FFFFFF;
		margin: 20px auto;
		image{
			width: 80px;
			height: 80px;
			border-radius: 8px;
			margin-right: 20px;
		}
		.proInfo{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 235px;
			height: 80px;
			.proTop{
				font-size: 12px;
				color: #494949;
				line-height: 18px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp:2;  /* 设置行数 */
				-webkit-box-orient: vertical;
			}
			.proBottom{
				display: flex;
				justify-content: space-between;
				
				font-size: 12px;
				color: #494949;
				line-height: 18px;
				// margin-top: 25px;
				.shoucang{
					
				}
				.proPrice{
					font-size: 16px;
					color: #1c4b47;
					font-weight: 600;
					
				}
			}
		}
	}
</style>
